import { Line } from '@ant-design/charts';
import React from 'react';

export type LineChartProps = {
  data: any[];
  xfield: string;
  yfield: string;
  seriesField: string | undefined;
  height:number|undefined;

  displayLabel: any;
  displayPoint: boolean | undefined;
  backColor?: string | undefined;
  lineColors?: string[] | undefined;
  lineWidth?: number | undefined;
};

let defPointStyle = {
  size: 5,
  shape: 'circle',
  style: {
    fill: 'white',
    stroke: '#5B8FF9',
    lineWidth: 2,
  },
}

const LineChart: React.FC<LineChartProps> = (props) => {
  const { data, xfield, yfield, seriesField, height, displayLabel, displayPoint, backColor, lineColors, lineWidth } = props;
  return (<>
    <Line
          style={{
            width:'100%',
            height:height ? height : '100%',
            backgroundColor:backColor,
          }}
          data={data}
          xField= {xfield}
          yField= {yfield}
          seriesField= {seriesField}
          label= {displayLabel}
          point={ displayPoint == true ? defPointStyle : undefined}
          color={lineColors}
          lineStyle={{lineWidth: lineWidth ?? 2}}
          // point= {{
          //   size: 5,
          //   shape: 'circle',
          //   style: {
          //     fill: 'white',
          //     stroke: '#5B8FF9',
          //     lineWidth: 2,
          //   },
          // }}
          // tooltip= {{
          //   showMarkers: false,
          // }}
          state= {{
            active: {
              style: {
                shadowBlur: 4,
                stroke: '#000',
                fill: 'red',
              },
            },
          }}
          interactions= {[
            {
              type: 'marker-active',
            },
          ]}
          // annotations={[
          //   // {
          //   //   type: 'regionFilter',
          //   //   start: ['min', 'median'],
          //   //   end: ['max', '0'],
          //   //   color: '#F4664A',
          //   // },
          //   // {
          //   //   type: 'text',
          //   //   position: ['min', 'median'],
          //   //   content: '中位数',
          //   //   offsetY: 25,
          //   //   style: {
          //   //     textBaseline: 'bottom',
          //   //   },
          //   // },
          //   // {
          //   //   type: 'line',
          //   //   start: ['min', 'median'],
          //   //   end: ['max', 'median'],
          //   //   style: {
          //   //     stroke: '#F4664A',
          //   //     lineDash: [2, 2],
          //   //   },
          //   // },

          //   // {
          //   //   type: 'dataMarker',
          //   //   position: ['4-1 00:03:49', 515891],
          //   //   line: {
          //   //     length: 20,
          //   //   },
          //   //   point: {
          //   //     style: {
          //   //       fill: 'yellow',
          //   //       stroke: 'yellow',
          //   //     },
          //   //   },
          //   //   autoAdjust: false,
          //   // },
          // ]}
          />
      </>
  );
};

export default LineChart;
